// Menu

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin menu {
  &-icon.x-icon {
    font-size: 1rem;
    transition: opacity $--x-animation-duration-base;
  }
  &-arrow.x-icon {
    transition: opacity $--x-animation-duration-base;
    &.is-open {
      transform: rotate(180deg);
    }
  }
  &-node {
    &.x-size {
      @include size(big, $--x-height-big, $--x-padding-big);
      @include size(large, $--x-height-large, $--x-padding-large);
      @include size(medium, $--x-height-medium, $--x-padding-medium);
      @include size(small, $--x-height-small, $--x-padding-small);
      @include size(mini, $--x-height-mini, $--x-padding-mini);
    }
  }
  x-slider {
    .x-slider-scroll > ul > li {
      &.x-slider-highlight {
        background-color: inherit;
        border-radius: 0;
        border: none;
        border-bottom: 0.125rem solid $--x-primary;
      }
      > x-link {
        padding: 0 !important;
        height: inherit !important;
        line-height: inherit !important;
      }
    }
  }
  &-column {
    width: 12rem;
    transition: $--x-animation-duration-base;
  }
  &-row {
    .#{$--x-menu}-text {
      margin-left: 0.25rem;
    }
  }
  &-nodes {
    .#{$--x-menu}-node {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: width $--x-animation-duration-base, background-color $--x-animation-duration-base;
      border-right: 0.125rem solid $--x-border;
      position: relative;
      user-select: none;
      padding-right: 0.875rem;
      .#{$--x-menu}-text {
        flex: 1;
        margin: 0 0.25rem;
        transition: background-color $--x-animation-duration-base, opacity $--x-animation-duration-base;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &:hover {
        color: $--x-primary;
        background-color: $--x-background-a100;
      }
      #{$--x-menu}-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        > a {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-decoration: none;
        }
      }
      &.x-activated {
        color: $--x-primary;
        background-color: $--x-background-a100;
        &::after {
          content: '';
          position: absolute;
          height: 100%;
          right: -0.125rem;
          top: 0;
          border-right: 0.125rem solid $--x-primary;
        }
      }
      &.#{$--x-menu}-category {
        cursor: inherit;
        color: $--x-text-400;
        &:hover {
          background-color: transparent;
        }
        > #{$--x-menu}-node {
          border-bottom: $--x-border-300-base;
        }
      }
    }
  }
  &-collapsed {
    &.#{$--x-menu}-column {
      width: 3rem;
    }
    .#{$--x-menu}-nodes {
      x-dropdown,
      .x-dropdown {
        display: flex;
        flex: 1;
      }
      .#{$--x-menu}-node {
        padding-left: 0 !important;
        padding-right: 0;
        #{$--x-menu}-node {
          padding-left: 0.875rem;
        }
        .#{$--x-menu}-text {
          opacity: 0;
          width: 0;
        }
      }
      .#{$--x-menu}-nodes {
        display: none;
      }
    }
    .#{$--x-menu}-arrow.x-icon {
      opacity: 0;
      width: 0;
    }
  }
}

@mixin size($size, $height, $padding) {
  @if $size != small and $size != mini {
    $padding: calc(#{$padding} + 0.25rem);
    $height: calc(#{$height} + 0.75rem);
  } @else {
    $height: calc(#{$height} + 0.5rem);
  }
  &-#{$size} {
    padding: 0 $padding;
    height: $height;
    line-height: $height;
    &.#{$--x-menu}-category {
      height: calc(#{$height} * 1.5);
    }
  }
}
